<template>
  <div>
    <!-- <h2 style="text-aligin: center">{{ datalist }}</h2> -->
    <div class="shows">
      <div class="goodsshow" v-for="(show, index) in shows" :key="index">
        <img :src="show.img" alt="" />
        <p>{{ show.text }}</p>
      </div>
    </div>
    <div class="details">
      <div class="goods" v-for="(good, index) in goods" :key="index">
        <img :src="good.img" alt="" />
        <p class="info">{{ good.info }}</p>
        <div class="count">
          <div class="countl">
            <b>{{ good.price1 | showPrice }}</b>
            <span>{{ good.price2 | showPrice }}</span>
          </div>
          <span class="iconfont icon-sangedian"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      shows: [
        {
          img: require("../../assets/img/show1.jpg"),
          text: "新品",
        },
        {
          img: require("../../assets/img/show2.jpg"),
          text: "T恤",
        },
        {
          img: require("../../assets/img/show3.jpg"),
          text: "卫衣",
        },
        {
          img: require("../../assets/img/show4.jpg"),
          text: "夹克",
        },
        {
          img: require("../../assets/img/show5.jpg"),
          text: "衬衫",
        },
        {
          img: require("../../assets/img/show6.jpg"),
          text: "针织",
        },
        {
          img: require("../../assets/img/show7.jpg"),
          text: "棉羽",
        },
        {
          img: require("../../assets/img/show8.jpg"),
          text: "穿搭型录",
        },
      ],
      goods: [
        {
          img: require("../../assets/img/shangyi.jpg"),
          info:
            "5cm 破洞休闲卫衣最新样式连帽外套破洞休闲卫衣最新样式连帽外套破洞休闲卫衣最新样式连帽外套",
          price1: 229,
          price2: 330,
        },
        {
          img: require("../../assets/img/yurong.jpg"),
          info: "字母印花休闲羽绒服",
          price1: 279,
          price2: 559,
        },
        {
          img: require("../../assets/img/waitao.jpg"),
          info: "5CM  图案印案保暖外套",
          price1: 130,
          price2: 335,
        },
        {
          img: require("../../assets/img/chenshan.jpg"),
          info: "THETHING 主题涂鸦满衬衫",
          price1: 356,
          price2: 557,
        },
      ],
      datalist: "",
    };
  },
  filters: {
    showPrice(price) {
      return "￥" + price.toFixed(2);
    },
  },
  computed: {
    index() {
      return this.$route.query.index;
    },
  },
  watch: {
    index: {
      handler(newVal) {
        if (newVal == 0) {
          // axios
          //   .get("url", {
          //     params: {
          //       type: "上衣",
          //     },
          //   })
          //   .then((res) => {
          this.datalist = "这是上衣的页面";
          //   });
        } else if (newVal == 1) {
          this.datalist = "这是裤装的页面";
        } else if (newVal == 2) {
          this.datalist = "这是球鞋的页面";
        } else if (newVal == 3) {
          this.datalist = "这是女装的页面";
        } else if (newVal == 4) {
          this.datalist = "这是生活的页面";
        } else if (newVal == 5) {
          this.datalist = "这是潮玩的页面";
        } else {
          this.datalist = "这是美妆的页面";
        }
      },
      immediate: true,
    },
  },
};
</script>
<style scoped>
.shows {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goodsshow {
  width: 60px;
  min-height: 73px;
  margin: 10px 15px;
  text-align: center;
}
.goodsshow img {
  width: 100%;
  height: 45px;
}
.goodsshow p {
  margin-top: 10px;
  font-size: 13px;
}
.details {
  width: 348px;
  margin: auto;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: 1px solid red; */
  width: 162px;
  margin-bottom: 29px;
  min-height: 279px;
}
.goods img {
  width: 100%;
  height: 218px;
}
.info {
  /* margin-top: 10px; */
  height: 30px;
  overflow: hidden;
  font-size: 10px;
  color: grey;
}
.count {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  justify-content: space-between;
}
.countl {
  width: 60px;
  display: flex;
  font-size: 11px;
  align-items: center;
  justify-content: space-between;
}
b {
  color: red;
  font-weight: 900;
}
.countl span {
  margin-left: 8px;
  color: gray;
  text-decoration: line-through;
}
</style>